<template>
  <div>
    <div class="nav">
      <h1><van-icon name="gift-o" /> 热门活动</h1>
      <h2 @click="Toast"><van-icon name="apps-o" /> 品牌分类</h2>
      <div style="text-align: center; margin: 5px 0px">
        <a href="/cart"
          ><van-icon name="shopping-cart-o" size="25" color="#fff"
        /></a>
      </div>
      <div style="text-align: center">
        <van-icon name="description" size="25" @click="Toast" />
      </div>
      <div style="text-align: center; margin-bottom: 5px">
        <van-icon name="star-o" size="25" @click="Toast" />
      </div>
      <div style="text-align: center">
        <van-icon name="share-o" size="25" @click="Toast" />
      </div>
      <div class="toTop">
        <span><van-icon name="arrow-up" /></span>
        <p>TOP</p>
      </div>
    </div>
    <header>
      <div class="h-nav main">
        <span><router-link to="/login">欢迎登录名鞋网</router-link></span>
        <ul>
          <li>
            <router-link
              to="/register"
              style="text-decoration: none; color: #c40000"
              >免费注册</router-link
            >
          </li>
          <li>我的名鞋库</li>
          <li>手机名鞋库</li>
          <li>收藏名鞋库</li>
          <li>400 116 2228</li>
          <li>工作日上班时间: 9:00-22:00. 非工作日上班时间: 10:00-22:00</li>
        </ul>
      </div>
    </header>
    <div class="m-header">
      <div class="m-nav main">
        <div><img src="/images/logo.png" alt="" /></div>
        <div>
          <span>专业精选</span>
          <span>足够喜欢</span>
        </div>
        <div class="box">
          <input type="text" placeholder="阿迪" /><button
            @click.prevent="Toast"
          >
            搜索
          </button>
          <h4>热搜:</h4>
          <ul>
            <li>跑步鞋</li>
            <li>休闲鞋</li>
            <li>篮球鞋</li>
            <li>男鞋</li>
            <li>女鞋</li>
          </ul>
        </div>
        <div>
          <a
            href="/cart"
            class="gw"
            style="color: #000; text-decoration: none; display: block"
            ><van-icon name="shopping-cart-o" /> 购物车</a
          >
        </div>
      </div>
    </div>
    <div class="f-header">
      <div class="f-nav main">
        <div>
          <span
            >所有商品分类
            <div class="fl">
              <p>全部品牌</p>
              <p>运动鞋</p>
              <p>运动服</p>
              <p>运动配件</p>
            </div>
          </span>
          <ul>
            <li>首页</li>
            <li>男子专区</li>
            <li>女子专区</li>
            <li>运动配件</li>
          </ul>
        </div>
        <div>
          <ol>
            <li>营业执照</li>
            <li>七天无理由退换货</li>
            <li>正品授权</li>
            <li>满99包邮</li>
          </ol>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import $ from 'jquery'
export default {
  mounted() {
    $(function () {
      $(window).on('scroll', function () {
        let sTop = $(this).scrollTop()
        if (sTop > 100) {
          $('.toTop').show()
        } else {
          $('.toTop').hide()
        }
      })
      $('.toTop').on('click', function () {
        $('html,body').animate({ scrollTop: 0 })
      })
    })
  },
  methods: {
    Toast() {
      Toast('该功能未开发,请敬请期待!')
    }
  }
}
</script>

<style lang="less" scoped>
html,
body {
  width: 100%;
  height: 100%;
}
.main {
  width: 1200px;
  margin: 0 auto;
  border: none;
  min-width: 1200px;
}
.nav {
  position: fixed;
  right: 0px;
  top: 0px;
  background-color: #000;
  width: 30px;
  height: 100%;
  color: white;
  z-index: 100;
}

.nav h1 {
  width: 30px;
  font-size: 20px;
  text-align: center;
  padding: 20px 0;
  background-color: #c40000;
  margin-bottom: 20px;
}

.nav h2 {
  width: 30px;
  text-align: center;
  padding: 20px 0;
  margin: 0 2px;
  border-bottom: 1px solid white;
}

.nav h2:hover {
  background-color: #c40000;
}

.nav img {
  width: 30px;
  height: 30px;
}

.nav div:hover {
  background-color: #c40000;
}

.nav div:nth-child(5) {
  margin-top: 300px;
}

.nav div:nth-child(7) {
  position: absolute;
  bottom: 20px;
  display: none;
  text-align: center;
  font-size: 14px;
}

header {
  width: 100%;
  height: 30px;
  background-color: #e6e6e6;
}

.h-nav {
  height: 30px;
}

.h-nav span {
  float: left;
  color: #c40000;
  margin-left: 10px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}
.h-nav span a {
  color: #c40000;
  text-decoration: none;
}
.h-nav ul li {
  height: 20px;
  margin-top: 5px;
  text-align: center;
  line-height: 20px;
  float: left;
  padding: 0 20px;
  border-right: 1px solid #ccc;
  cursor: pointer;
}

.h-nav ul li:nth-child(1) {
  color: #c40000;
}

.h-nav ul li:nth-child(5) {
  color: #c40000;
}

.h-nav ul li:nth-child(6) {
  font-size: 12px;
  color: #c40000;
}

.m-header {
  height: 80px;
  width: 100%;
}

.m-nav {
  height: 60px;
}

.m-nav div {
  float: left;
  /* height: 60px; */
}

.m-nav img {
  height: 60px;
}

.m-nav span {
  /* font-size: 20px; */
  float: left;
  margin-right: 10px;
  margin-top: 30px;
}

.m-nav .box {
  width: 330px;
  height: 60px;
  margin-left: 40px;
}

.m-nav input {
  width: 280px;
  height: 26px;
  display: inline-block;
  margin-right: none;
  box-sizing: border-box;
  margin-top: 20px;
}

.m-nav button {
  display: inline-block;
  width: 50px;
  height: 26px;
  background-color: black;
  color: white;
  /* border: 1px solid #ccc; */
  cursor: pointer;
  /* margin-top: 20px; */
}

.m-nav h4 {
  float: left;
  font-size: 12px;
  line-height: 20px;
  color: #ccc;
  margin-top: 5px;
}

.m-nav ul li {
  float: left;
  font-size: 14px;
  line-height: 20px;
  margin-top: 5px;
  margin-left: 15px;
  cursor: pointer;
}

.m-nav div:nth-child(4) {
  border: 1px solid #ccc;
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  margin-top: 20px;
  margin-left: 100px;
}
.gw:hover {
  background-color: orange;
}
.f-header {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  background-color: #a21f25;
}

.f-header .f-nav {
  height: 40px;
}
.f-header .fl {
  height: 160px;
  width: 200px;
  position: absolute;
  background-color: #000;
  display: none;
}
.f-header span:hover .fl {
  display: block;
}
.f-header .fl p {
  height: 40px;
  width: 200px;
}
.f-header .fl p:hover {
  background-color: #c40000;
}
.f-nav div:nth-child(1) {
  float: left;
}

.f-nav div:nth-child(2) {
  float: right;
}

.f-nav span {
  width: 200px;
  height: 40px;
  color: white;
  text-align: center;
  line-height: 40px;
  background-color: rgba(255, 255, 255, 0.3);
  display: block;
  float: left;
  position: relative;
}

.f-nav ul {
  height: 40px;
  float: left;
}

.f-nav ul li {
  float: left;
  padding: 0 15px;
  height: 30px;
  margin-top: 5px;
  line-height: 30px;
  text-align: center;
  color: white;
  border-left: 1px solid #000;
}

.f-nav ul li:nth-child(1) {
  height: 40px;
  margin: 0px;
  line-height: 40px;
  background-color: black;
}

.f-nav ul li:hover {
  height: 40px;
  margin: 0px;
  line-height: 40px;
  background-color: black;
}

.f-nav ol {
  height: 40px;
}

.f-nav ol li {
  height: 20px;
  margin-top: 10px;
  float: left;
  font-size: 12px;
  text-align: center;
  line-height: 20px;
  color: white;
  padding: 0 5px;
  border-right: 1px solid white;
}

.f-nav ol li:nth-child(4) {
  border: none;
}
</style>
